<template>
    <div class="order">
      <div class="address" @click="showModal">
        <div v-if="isEmpty" class="empty">
          <button>添加地址</button>
        </div>
        <div class="address-info" v-else>
          <div class="name">
            <h3>收货人: {{address.name}}</h3>
            <span>{{address.phone}}</span>
          </div>
          <p>收货地址: {{address.address}}</p>
        </div>
        <span class="arrow"></span>
      </div>
      <div class="product">
        <div class="base">
          <img :src="book.cover" alt="">
          <div class="info">
            <h3>{{book.title?book.title:book.name}}</h3>
          </div>
        </div>
        <div class="list">
          <div class="item">
            <p>单价</p>
            <span>￥{{book.price/100}}</span>
          </div>
          <div class="item">
            <p>数量</p>
            <div class="count">
              <button @click="reduceCount()">-</button>
              <span>{{count}}</span>
              <button @click="addCount()">+</button>
            </div>
          </div>
          <div class="item">
            <p>配送方式</p>
            <span>快递 免邮</span>
          </div>
          <div class="item">
            <span>买家留言:</span>
            <input v-model="liuyan" type="text"/>
          </div>
        </div>
      </div>
      <div class="fixbox">
        <span>合计：￥{{totalPrice/100}}</span>
        <a @click="order" class="buy">提交订单</a>
      </div>
      <div class="address-fix" v-if="modalShow">
        <div class="mask" @click="hideModal"></div>
        <div class="address-con">
          <h3>选择地址</h3>
          <ul>
            <li v-for="(v,k) in addressList" :key="k" @click="chooseAddress(k)" >
              <h3>{{v.name}} <span>{{v.phone}}</span></h3>
              <p>{{v.address}}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
</template>

<script>
import * as info from '../api/info'
import * as order from '../api/order'
import wxConfig from '../api/wx'
export default {
  name: 'order',
  data () {
    return {
      isEmpty: true,
      modalShow: false,
      address: {},
      book: {},
      bid: 0,
      count: 1,
      liuyan: '',
      addressList: [],
      type: '',
      consignee_id: 0
    }
  },
  computed: {
    totalPrice () {
      return this.count * this.book.price
    }
  },
  methods: {
    showModal () {
      if(this.isEmpty){
        this.$router.push({ path:'/editAddress', query:{order: true}})
      }else{
        this.modalShow = true
      }
    },
    hideModal () {
      this.modalShow = false
    },
    chooseAddress(key){
      this.consignee_id = this.addressList[key].id
      this.address = this.addressList[key]
      this.hideModal()
    },
    getAddress () {
      let that = this
      info.getAddressList()
        .then(res => {
          if(res.data.length > 0){
            that.isEmpty = false
          }else {
            that.isEmpty = true;
          }
          console.log(that.isEmpty)
          that.addressList = res.data
          that.address = res.data[0]
          that.consignee_id = res.data[0].id
        })
    },
    getBookDetail (id) {
      info.getBook(id)
        .then(res => {
          console.log(1)
          console.log(res.data)
          this.book = res.data
        })
    },
    getCourse (id) {
      info.getCourse(id).then(res => {
        this.book = res.data
      })
    },
    addCount () {
      console.log(this.count)
      this.count++
    },
    reduceCount () {
      if (this.count > 1) {
        this.count--
      }
    },
    order () {
      let that = this
      order.orders(that.id, that.type, that.consignee_id).then(res => {
        order.sign(res.data.id).then(res => {
          const data = res.data
          wxConfig.wxPay(data, function () {
            if (that.type == 2) {
              that.$router.push('/myjiaocai')
            } else {
              that.$router.push('/mycourse')
            }
          })
          // this.onBridgeReady(param)
        })
      })
    },
  },
  mounted () {
    this.id = this.$route.query.id
    this.type = this.$route.query.type
    this.getAddress()
    if (this.$route.query.type == 1) {
      this.getCourse(this.id)
    } else if (this.$route.query.type == 2) {
      this.getBookDetail(this.id)
    }
  }
}
</script>

<style scoped>
  .address-fix{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,.45);
  }
  .address-fix .mask{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(0,0,0,.7);
  }
  .address-con{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    height: 75%;
    background: #fff;
  }
  .address-con>h3{
    font-size: .44rem;
    color: #000;
    margin: 0;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
  }
  .address-con ul {
    padding: 0 .3rem;
    height: 80%;
    overflow-y: scroll;
  }
  .address-con ul li{
    border-bottom: 1px solid #e1e1e1;
    padding: .2rem 0 .2rem .2rem;
  }
  .address-con li h3{
    font-size: .4rem;
    color: #333;
  }
  .address-con li h3 span{
    font-size: .36rem;
    color: #888;
    margin-left: .2rem;
  }
  .address-con li p{
    font-size: .38rem;
  }
  .order{
  padding-bottom: 1.2rem;
  position: relative;
}
.address{
  position: relative;
  padding: .3rem;
}
.address .arrow{
  right: .3rem;
}
.address-info{
  width: 8.8rem;
}
.address-info .name{
  display: flex;
  justify-content: space-between;
  align-self: center;
}
.address-info .name h3{
  font-size: .4rem;
  color: #333;
}
.address-info .name span{
  font-size: .38rem;
  color: #555;
}
.address-info p{
  margin: .2rem 0 0;
  font-size: .35rem;
  line-height: .56rem;
  color: #333;
}
.product{
  padding: 0 0 .3rem;
}
.base{
  display: flex;
  background: #f1f1f1;
  padding: .3rem;
}
.base img{
  width: 2.5rem;
  height: 2rem;
  margin-right: .3rem;
  flex-shrink: 0;
}
.base .info h3{
  font-size: .4rem;
  color: #333;
  margin: 0 0 .2rem;
}
.base .info p{
  font-size: .35rem;
  line-height: .56rem;
  color: #666;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.item{
  display: flex;
  height: 1.2rem;
  border-bottom: 1px solid #f1f1f1;
  justify-content: space-between;
  align-items: center;
  padding: 0 .3rem;
}
.item p{
  font-size: .4rem;
  color: #333;
}
.item .count{
  border: 1px solid #d1d1d1;
}
.item .count button{
  font-size: .4rem;
  width: .8rem;
  height: .8rem;
  border: none;
  background: #fff;

}
.item span{
  color: #666;
  font-size: .38rem;
}
.item input{
  border: none;
  flex-grow: 1;
  padding-left: .2rem;
}
.item input:focus{
  outline: none;
}
.fixbox{
  background: #fff;
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.2rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border-top: 1px solid #d1d1d1;
}
.fixbox span{
  font-size: .4rem;
  margin-right: .3rem;
}
.fixbox .buy{
  width: 3rem;
  background: #007aff;
  color: #fff;
  text-align: center;
  font-size: .42rem;
  height: 1.2rem;
  line-height: 1.2rem;
}
  .empty button{
    background: #f1f1f1;
    border: none;
    display: inline-block;
    padding: 4px 10px;
  }
</style>
